<!-- <page-header [title]=""></page-header> -->
<nz-card>
  <div nz-row>
    <div nz-col nzSpan="6">
      <div style="padding-bottom: 10px;border-right-width: 10px;padding-right: 10px; padding-left: 10px;">
        <button nz-button (click)="syncData()" style="width:100%" [nzLoading]="syncDataLoading" nzType="primary">
          <i class="anticon anticon-reload"></i>
          <span>同步组织架构</span>
        </button>
      </div>
      <div style="padding-left:10px; padding-right:10px;">
        <nz-tree style="margin:0px;" [(ngModel)]="nodes" [nzShowExpand]="true" (nzClick)="activeNode($event)"
          (nzDblClick)="openFolder($event)">
          <ng-template style="margin:0px;" #nzTreeTemplate let-node>
            <span class="custom-node" aria-grabbed="true" [class.active]="activedNode?.key===node.key">
              <span *ngIf="!node.isLeaf" [class.shine-animate]="node.origin.isLoading">
                <i class="anticon anticon-folder" *ngIf="!node.isExpanded" (click)="openFolder(node)"></i>
                <i class="anticon anticon-folder-open" *ngIf="node.isExpanded" (click)="openFolder(node)"></i>
                <span class="folder-name">{{node.title}}</span>
              </span>
              <span *ngIf="node.isLeaf">
                <i class="anticon anticon-folder"></i>
                <span class="file-name">{{node.title}}</span>
              </span>
            </span>
          </ng-template>
        </nz-tree>
      </div>
    </div>
    <div nz-col nzSpan="18">
      <form nz-form (ngSubmit)="refreshData(tempNode,false,true)" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="18">
          <div nz-col [nzSpan]="8" class="mb-md">
            <div nz-form-item class="d-flex">
              <div nz-form-label>
                <nz-form-label nzFor="name">用户名</nz-form-label>
              </div>
              <div nz-form-control class="flex-1">
                <input nz-input [(ngModel)]="search.name" name="name" placeholder="请输入用户名" nzSize="default">
              </div>
            </div>
          </div>
          <div nz-col [nzSpan]="8" class="mb-md">
            <div nz-form-item class="d-flex">
              <div nz-form-label>
                <nz-form-label nzFor="mobile">电话号码</nz-form-label>
              </div>
              <div nz-form-control class="flex-1">
                <input nz-input [(ngModel)]="search.mobile" name="mobile" placeholder="请输入电话号码" nzSize="default">
              </div>
            </div>
          </div>
          <div nz-col [nzSpan]="8" class="mb-md" style="text-align: right;">
            <button nz-button type="submit" nzType="primary" [nzLoading]="loading">查询</button>
            <button nz-button type="reset" (click)="refreshData(tempNode,true)" class="mx-sm">重置</button>
          </div>
        </div>
      </form>
      <ng-template #totalTemplate let-total>共 {{query.total}} 条</ng-template>
      <nz-table #nzTable [nzFrontPagination]="false" [nzShowTotal]="totalTemplate" [nzTotal]="query.total"
        [nzData]="employeeList" [(nzPageIndex)]="query.pageIndex" [(nzPageSize)]="query.pageSize" [nzLoading]="loading"
        [nzShowSizeChanger]="true" (nzPageIndexChange)="refreshData(tempNode)"
        (nzPageSizeChange)="refreshData(tempNode)">
        <thead>
          <tr>
            <th>
              <label nz-checkbox [(ngModel)]="isSelectedAll" (ngModelChange)="checkAll($event)">
              </label>
            </th>
            <th>姓名</th>
            <th>职位</th>
            <th>电话号码</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of nzTable.data">
            <td nz-td>
              <label nz-checkbox [(ngModel)]="item.roleSelected" (ngModelChange)="isCancelCheck($event)">
              </label>
            </td>
            <td>{{item.name}}</td>
            <td>{{item.position}}</td>
            <td>{{item.mobile}}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>
<!-- <area-detail-modal #selectModal></area-detail-modal>
<doc-role-modal #docModal></doc-role-modal> -->